import React, { useEffect, useState } from 'react';
import {
    Button,
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    TreeSelect,
} from 'antd';

type SizeType = Parameters<typeof Form>[0]['size'];

const Mytype = (props) => {
    const [form] = Form.useForm();

    useEffect(() => {
        if (props.title == '编辑') {
            form.setFieldsValue(props.itemobj)
        }
    })


    const onFinish = (values: any) => {
        let tags = []
        if (values.tags == 1) {
            tags = ['全栈开发']
        } else if (values.tags == 2) {
            tags = ['前端工程师']
        } else {
            tags = ['后端工程师']
        }

        if (props.title == '添加') {
            let obj = {
                ...values,
                tags,
                key:new Date().getTime()
            }
            props.addm(obj)
        }else{
            let obj={
                ...props.itemobj,
                ...values,
                tags
            }
            props.deitm(obj)
        }
        props.handleCancel()
    };
    return (
        <Form
            form={form}
            onFinish={onFinish}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 14 }}
            style={{ maxWidth: 600 }}
        >
            <Form.Item label="用户名" name='name'>
                <Input />
            </Form.Item>
            <Form.Item label="简介" name='desc'>
                <Input />
            </Form.Item>
            <Form.Item label="角色" name='role'
            >
                <Radio.Group
                    options={[
                        { value: 1, label: '超集管理员' },
                        { value: 2, label: '开发者' },
                    ]}
                />
            </Form.Item>
            <Form.Item label="标签" name='tags'>
                <Select
                    defaultValue="lucy"
                    style={{ width: 120 }}
                    options={[
                        { value: '1', label: '全栈开发' },
                        { value: '2', label: '前端工程师' },
                        { value: '3', label: '后端工程师' },
                    ]}
                />
            </Form.Item>
            <Form.Item>
                <Button type='primary' htmlType='submit'>确定</Button>
            </Form.Item>
        </Form>
    );
};

export default Mytype;